<template>
  <div class="vercontainer h_full flexcolumn p_relative">
    <div class="p-12 flexcenter">
      <el-input
        placeholder="请输入内容"
        v-model="queryParams.keyword"
        class="inputsearch"
        size="small"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-tooltip
        class="item"
        effect="dark"
        content="编辑分组"
        placement="left"
      >
        <i class="el-icon-setting commhover f-20 ml-12" @click="goEdit"></i>
      </el-tooltip>
    </div>
    <div class="groupbox flex flexwrap">
      <div
        class="groupitem f-12 textover c_text flexcenter commhover"
        v-for="(group, index) in groupList"
        :key="index"
      >
        {{ group.name }}
      </div>
    </div>
    <div class="listbox p-12">
      <el-collapse class="mycollapse">
        <el-collapse-item v-for="(item, index) in list" :key="index">
          <template slot="title">
            <div class="c_header flex aligncenter c_666 f-14">
              <el-tooltip content="发送整组" placement="top-start">
                <span
                  class="circlebox flexcenter mr-10"
                  @click="sendChatList(item.rows)"
                >
                  <i class="el-icon-back f-18 c_fff"></i>
                </span>
              </el-tooltip>
              <span class="textover coll_text">
                {{ item.name }}
              </span>
              <span class="">（7）</span>
            </div>
          </template>
          <div class="col_content mt-8 bg_f7f7f7">
            <div
              v-for="(row, i) in item.rows"
              :key="i"
              class="flex aligncenter flexwrap rowitem p-10"
            >
              <el-tooltip content="发送单条" placement="top-start">
                <svg-icon
                  icon-class="itranfer"
                  class-name="f-16 mr-10"
                  style="color: #d2d2d2"
                  @click="sendChatList([...row])"
                />
              </el-tooltip>
              <div class="chatcontent flex11 flex aligncenter">
                <img
                  v-if="row.type == 'image'"
                  :src="row.url"
                  alt=""
                  class="chatimg"
                />
                <div v-if="row.type == 'text'" class="flex aligncenter">
                  <div class="chatbubble bg_fff f-15 c_000">
                    {{ row.content }}
                  </div>
                  <el-tooltip content="复制到输入框" placement="top-start">
                    <i
                      class="el-icon-copy-document commhover f-16 ml-10"
                      @click="copytext(row.content)"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        pageNo: 1, // 当前页数
        pageSize: 14, // 每页显示多少条
        keyword: "",
      },
      groupList: [
        { name: "全部", id: 1 },
        { name: "默认分组", id: 2 },
        { name: "分组1", id: 3 },
      ],
      list: [
        {
          id: 1,
          name: " 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念",
          rows: [
            {
              type: "text",
              content: "消息内容2",
            },
            {
              type: "image",
              url: "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240104/4e4ce81831d71c426db091b88e3de470.jpg",
            },
          ],
        },
        {
          id: 2,
          name: " 遵循用户习惯的语言和概念",
          rows: [
            {
              type: "text",
              content: "消息内容2",
            },
            {
              type: "image",
              url: "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240104/4e4ce81831d71c426db091b88e3de470.jpg",
            },
          ],
        },
      ],
    };
  },
  props: {
    type: {
      default: 1, //1企业话术 3 个人话术
    },
  },
  methods: {
    goEdit() {
      //跳到话术库页面
      window.open(this.$host + "/market/reply");
    },

    //
    copytext(text) {
      this.$store.commit("chat/SET_CHATMSG", text);
    },

    sendChatList(arr) {
      this.$store.commit("chat/SET_SENDCHATLIST", arr);
    },
  },
};
</script>

<style lang="scss" scoped>
.vercontainer {
  overflow: hidden;
  overflow-y: auto;
}
.groupbox {
  padding: 0 12px 8px;
}
.groupitem {
  width: calc(25% - 6px);
  height: 24px;
  padding: 0 4px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
}
.mycollapse {
  border: 0;
  ::v-deep .el-collapse-item__header {
    height: 46px;
    line-height: 46px;
    border-radius: 4px;
    border: 0;
    &:hover,
    &.is-active {
      background-color: #f7f7f7;
    }
  }
  ::v-deep .el-collapse-item__wrap {
    border: 0;
  }
}
.circlebox {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #c1c3c9;
}
.c_header {
  width: 92%;
  padding-left: 10px;
}
.coll_text {
  display: inline-block;
  max-width: calc(100% - 80px);
}
.rowitem {
  min-height: 60px;
}
.chatimg {
  max-width: 160px;
  max-height: 160px;
  border-radius: 5px;
}
.chatbubble {
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  max-width: 360px;
  word-break: break-all;
}
</style>